<template>
  <div id="history">
    <div class="container">
      <div class="right">
        <div class="timeSearch">
          <div class="header">
            <div class="icon">
              <img src="/src/assets/images/airplane.png" alt="" />
            </div>
            <div class="content">
              <div class="title">回放时间</div>
              <div class="timePick">
                <el-date-picker
                  v-model="searchTime"
                  type="datetimerange"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  format="YYYY-MM-DD HH:mm"
                  date-format="YYYY/MM/DD ddd"
                  time-format="A hh:mm:ss"
                  popper-class="history-picker-popper"
                  @change="getHistoryList"
                />
              </div>
              <div class="desc">查询选定时间段飞行航空器</div>
            </div>
          </div>
          <div class="body">
            <el-tree
              ref="treeRef"
              :data="searchData"
              :show-checkbox="!isStart"
              :props="props"
              default-expand-all
              node-key="droneUK"
              highlight-current
              @check-change="getDroneUK"
            />
          </div>
        </div>
        <div class="playContral">
          <div class="contralArgs">
            <div class="item">
              <div class="label">回放倍速:</div>
              <div class="arg">
                <el-select
                  v-model="playSpeed"
                  placeholder="Select"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in speed_type"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </div>
            <div class="item">
              <div class="label">航空器高度显示(米):</div>
              <div class="arg">
                <el-input
                  v-model="lowHeight"
                  clearable
                  placeholder="最低高度"
                ></el-input>
                <div class="divider"></div>
                <el-input
                  v-model="topHeight"
                  clearable
                  placeholder="最高高度"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="contralBtns">
            <el-button v-if="!isStart" class="btn suspend" @click="startMove"
              >开始</el-button
            >
            <el-button v-else class="btn suspend" @click="pauseAnimation">
              暂停
            </el-button>
            <el-button class="btn continue" @click="resumeAnimation"
              >继续</el-button
            >
            <el-button class="btn remove" @click="clear">清除</el-button>
          </div>
        </div>
      </div>

      <div class="left">
        <!-- 地图 -->
        <div id="historyMap"></div>

        <!--  图层控件  -->
        <div class="airspaceLayer" @click="airspaceControl"></div>

        <!-- 图层控制 -->
        <div v-if="layerVisible" class="layerControl">
          <el-checkbox
            v-model="satellite"
            label="卫星地图"
            @change="swicthSatellite"
            size="large"
          />
          <el-checkbox
            v-model="grid"
            label="网格"
            @change="handleGrid"
            size="large"
          />
        </div>

        <el-table :data="trackList" class="trackList" max-height="330">
          <!-- 飞手 -->
          <el-table-column
            label="飞手"
            :show-overflow-tooltip="true"
            min-width="110"
            align="center"
          >
            <template #default="{ row }">
              {{ row.flyingHand || "-" }}
            </template></el-table-column
          >
          <!-- 航空器 -->
          <el-table-column
            label="航空器"
            :show-overflow-tooltip="true"
            min-width="110"
            align="center"
          >
            <template #default="{ row }">
              {{ row.aircraftId || "-" }}
            </template></el-table-column
          >
          <!-- 当前时间 -->
          <!-- <el-table-column
            label="当前时间"
            prop="flyingHand"
            :show-overflow-tooltip="true"
            min-width="110"
            align="center"
          /> -->
          <!-- 高度 -->
          <el-table-column
            label="高度(m)"
            :show-overflow-tooltip="true"
            min-width="110"
            align="center"
          >
            <template #default="{ row }">
              {{ row.height || "-" }}
            </template></el-table-column
          >
          <!-- 速度 -->
          <el-table-column
            label="速度(m/s)"
            :show-overflow-tooltip="true"
            min-width="110"
            align="center"
          >
            <template #default="{ row }">
              {{ row.speed || "-" }}
            </template></el-table-column
          >
          <!-- 方向角 -->
          <el-table-column
            label="方向角(度)"
            :show-overflow-tooltip="true"
            min-width="110"
            align="center"
          >
            <template #default="{ row }">
              {{ row.directionAngle || "-" }}
            </template></el-table-column
          >
          <!-- 航空器坐标 -->
          <el-table-column
            label="航空器坐标"
            :show-overflow-tooltip="true"
            min-width="110"
            align="center"
          >
            <template #default="{ row }">
              {{ row.dronePosition || "-" }}
            </template></el-table-column
          >
          <!-- 飞手/基站坐标 -->
          <el-table-column
            label="飞手/基站坐标"
            :show-overflow-tooltip="true"
            min-width="110"
            align="center"
          >
            <template #default="{ row }">
              {{ row.flyingHandPos || "-" }}
            </template></el-table-column
          >
        </el-table>
      </div>
    </div>
    <div class="detailTabs" v-drag v-if="isTabsVisible">
      <el-tabs v-model="activeName">
        <!-- <el-tab-pane v-if="aircraftType === 1" label="飞机信息" name="first">
        <div class="content-line">
          <span>飞手姓名</span>
          <span>{{ droneModel.name }}</span>
        </div>
        <div class="content-line">
          <span>飞手性别</span>
          <span>{{ droneModel.gander }}</span>
        </div>
        <div class="content-line">
          <span>飞手联系方式</span>
          <span>{{ droneModel.phone }}</span>
        </div>
        <div class="content-line">
          <span>证件号码</span>
          <span>{{ droneModel.number }}</span>
        </div>
        <div class="content-line">
          <span>居住地址</span>
          <span>{{ droneModel.address }}</span>
        </div>
        <div class="content-line">
          <span>飞行执照</span>
          <span>{{ droneModel.liencse }}</span>
        </div>
      </el-tab-pane> -->
        <el-tab-pane label="无人机信息 " name="first">
          <div v-for="droneModel in droneModelList" :key="droneModel">
            <div class="content-line">
              <span>无人机型号:</span>
              <span class="contant">{{
                `${droneModel.brandName} - ${droneModel.modelType}`
              }}</span>
            </div>
            <div class="content-line">
              <span>无人机SN</span>
              <span class="contant">{{
                droneModel.flightControlSn
                  ? `${droneModel.flightControlSn}`
                  : "-"
              }}</span>
            </div>
            <div class="content-line">
              <span>无人机ID</span>
              <span class="contant">{{
                droneModel.ID ? `${droneModel.ID}` : "-"
              }}</span>
            </div>
            <div class="content-line">
              <span>起飞时间</span>
              <span class="contant">{{
                droneModel.takeoffTime ? `${droneModel.takeoffTime}` : "-"
              }}</span>
            </div>
            <div class="content-line">
              <span>无人机坐标</span>
              <span class="contant">{{
                droneModel.curLongitude
                  ? `${droneModel.curLongitude} ${droneModel.curLatitude}`
                  : "-"
              }}</span>
            </div>
            <div class="content-line">
              <span>无人机速度</span>
              <span class="contant">{{
                droneModel.curSpeed ? `${droneModel.curSpeed} 米/s` : "-"
              }}</span>
            </div>
            <div class="content-line">
              <span>无人机高度</span>
              <span class="contant">{{
                droneModel.curHeight ? `${droneModel.curHeight} 米` : "-"
              }}</span>
            </div>
            <div class="content-line">
              <span>方向角</span>
              <span class="contant">{{
                droneModel.directionAngle
                  ? `${droneModel.directionAngle}°`
                  : "-"
              }}</span>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="飞手信息" name="third">
          <div v-for="flyingHand in flyingHandList" :key="flyingHand">
            <div class="content-line">
              <span>飞手姓名</span>
              <span class="contant">{{ flyingHand.userName || "-" }}</span>
            </div>
            <div class="content-line">
              <span>飞手性别</span>
              <span class="contant">{{ flyingHand.sex || "-" }}</span>
            </div>
            <div class="content-line">
              <span>飞手联系方式</span>
              <span class="contant">{{ flyingHand.phoneNumber || "-" }}</span>
            </div>
            <div class="content-line">
              <span>证件号码</span>
              <el-tooltip
                class="box-item"
                effect="dark"
                :content="flyingHand.credentialsNumber"
                placement="top"
              >
                <span class="contant">{{
                  flyingHand.credentialsNumber || "-"
                }}</span>
              </el-tooltip>
            </div>
            <div class="content-line">
              <span>居住地址</span>
              <el-tooltip
                class="box-item"
                effect="dark"
                :content="flyingHand.residentialAddress"
                placement="top"
              >
                <span class="contant">{{
                  flyingHand.residentialAddress || "-"
                }}</span>
              </el-tooltip>
            </div>
            <div class="content-line">
              <span>飞行执照</span>
              <span class="contant">{{ flyingHand.pilotLicense || "-" }}</span>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="飞行计划" name="fourth">
          <div class="content-line">
            <span>飞行计划编号</span>
            <span class="contant">{{ flightPlan.flyApplyCode }}</span>
          </div>
          <div class="content-line">
            <span>申请人</span>
            <span class="contant">{{ flightPlan.applicant }}</span>
          </div>
          <div class="content-line">
            <span>飞行计划范围</span>
            <span class="contant">
              <el-checkbox v-model="showAirspace"></el-checkbox
              >显示飞行范围/航线</span
            >
          </div>
          <div class="content-line">
            <span>起飞点</span>
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="flightPlan.takeOffPointAddress"
              placement="top"
            >
              <span class="contant">{{
                flightPlan.takeOffPointAddress || "--"
              }}</span>
            </el-tooltip>
          </div>
          <div class="content-line">
            <span>降落点</span>
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="flightPlan.landingPointAddress"
              placement="top"
            >
              <span class="contant">{{
                flightPlan.landingPointAddress || "--"
              }}</span>
            </el-tooltip>
          </div>
          <div class="content-line">
            <span>飞行计划底高</span>
            <span class="contant">{{
              `${flightPlan.lowHeight} 米` || "--"
            }}</span>
          </div>
          <div class="content-line">
            <span>飞行计划顶高</span>
            <span class="contant">{{
              `${flightPlan.topHeight} 米` || "--"
            }}</span>
          </div>
          <div class="content-line">
            <span>飞行时间段</span>
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="`${flightPlan.startTime}~${flightPlan.endTime}`"
              placement="top"
            >
              <span class="contant">{{
                `${flightPlan.startTime}~${flightPlan.endTime}`
              }}</span>
            </el-tooltip>
          </div>
          <div class="content-line">
            <span>飞行任务性质</span>
            <span class="contant">{{ flightPlan.taskName || "--" }}</span>
          </div>
          <div class="content-line">
            <span>飞行模式</span>
            <span class="contant">{{ flightPlan.flightMode || "--" }}</span>
          </div>
          <div class="content-line">
            <span>操作模式</span>
            <span class="contant">{{ flightPlan.operatorMode || "--" }}</span>
          </div>
          <div class="content-line">
            <span>任务审批文件</span>
            <span class="contant">
              <span v-if="!flightPlan.files">{{ "--" }}</span>
              <el-tooltip
                v-else
                v-for="file in flightPlan.files"
                :key="file.fileId"
                class="box-item"
                effect="dark"
                :content="`${file.fileName}.${file.fileExtension}`"
                placement="top"
              >
                <span>{{ `${file.fileName}.${file.fileExtension}` }}</span>
              </el-tooltip>
            </span>
          </div>
          <div class="content-line">
            <span>应急处置预案</span>
            <span class="contant">{{ flightPlan.emergencyPlan || "--" }}</span>
          </div>
          <div class="content-line">
            <span>备注说明</span>
            <span class="contant">{{ flightPlan.remark || "--" }}</span>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div style="display: flex; justify-content: center; margin-top: 20px">
        <div class="goBack" @click="tabsVisibleClose">关闭</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "History",
};
</script>

<script setup>
import { getCurrentInstance, onMounted } from "vue";
import { searchDroneByTime, historyTrack } from "@/api/history/index";
import { dataFormat } from "@/utils/format";

const { proxy } = getCurrentInstance();

const { speed_type } = proxy.useDict("speed_type");

const props = {
  label: "name",
  children: "list",
  // children: "modelType",
};
// 轨迹列表数据
const trackList = ref([]);
// 轨迹航线
const trackLineList = ref([]);
let markerList = ref([]);
let lineList = ref([]);

const searchData = ref([]);
const playSpeed = ref("1");
const lowHeight = ref();
const topHeight = ref();

const flightPlan = ref({});
const flyingHandList = ref([{}]);
const droneModelList = ref([{}]);
const activeName = ref("first");

let aMap = null;
/**
 * @地图初始化
 * */
const initMap = () => {
  aMap = new AMap.Map("historyMap", {
    viewMode: "3D",
    zoom: 12,
    center: [120.209947, 30.245853],
    mapStyle: "amap://styles/fresh",
    resizeEnable: true,
  });
};

const isTabsVisible = ref(false);
const tabsVisibleClose = () => {
  isTabsVisible.value = false;
};

// -------------------------------------------------------------    查询历史航空器    -------------------------------------------------

// 查询时间
const searchTime = ref();

/**
 * @根据时间查询航空器列表
 * */
async function getHistoryList() {
  let beginTime = dataFormat(searchTime.value[0], "YYYY-MM-DD HH:mm:ss");
  let endTime = dataFormat(searchTime.value[1], "YYYY-MM-DD HH:mm:ss");
  const { data } = await searchDroneByTime({ beginTime, endTime });
  // data.forEach((item) => {
  //   item.disabled = isStart.value;
  //   if (item.list) {
  //     deepEach(item.list);
  //   }
  // });
  searchData.value = data;
}

/**
 * @子节点处理
 * */
function deepEach(arr) {
  arr.forEach((item) => {
    item.disabled = isStart.value;
    if (item.list) {
      deepEach(item.list); // 递归
    }
  });
}

// getCurrentKey
async function getDroneUK(item, isChecked) {
  let droneUK = item.droneUK;
  let position = null;
  let height = null;
  let speed = null;
  let flyingHand = null;
  let aircraftId = null;
  let flyingHandPos = null;
  let dronePosition = null;
  let directionAngle = null;

  if (isChecked && !!droneUK) {
    const { data } = await historyTrack({ droneUKs: [droneUK] });
    console.log(data);
    let arr = data[0].coors.map((item) => {
      return [item.longitude, item.latitude];
    });
    position = Deduplication(arr);
    console.log(position);
    height = data[0].curHeight.toFixed(2);
    speed = data[0].curSpeed.toFixed(2);
    aircraftId = data[0].model;
    flyingHandPos = [
      data[0].driverLongitude.toFixed(6),
      data[0].driverLatitude.toFixed(6),
    ];
    dronePosition = [
      data[0].curLongitude.toFixed(6),
      data[0].curLatitude.toFixed(6),
    ];
    directionAngle = data[0].directionAngle;
    flyingHand = item.name;

    trackList.value.push({
      height,
      speed,
      aircraftId,
      flyingHandPos,
      dronePosition,
      directionAngle,
      flyingHand,
    });
    trackLineList.value.push(position);

    let marker = drawMarker(position[0]);
    let line = drawLine(position);
    markerList.value.push(marker);
    lineList.value.push(line);
    aMap.add([marker, line]);
  }
}

/**
 * @点位去重
 * */
function Deduplication(linePoints) {
  const arr = [];
  let len = linePoints.length;
  for (let i = 0; i < len; i++) {
    const curPoint = linePoints[i];
    if (i === len - 1) {
      arr.push(curPoint);
      break;
    }
    const nextPoint = linePoints[i + 1];
    let isDifferent = curPoint.some((item, index) => {
      return item !== nextPoint[index];
    });
    if (isDifferent) {
      arr.push(curPoint);
    }
  }
  return arr;
}
// -------------------------------------------------------------    图层控制    -------------------------------------------------

const layerVisible = ref(false);
/**
 * @显示图层控件
 * */
const airspaceControl = () => {
  layerVisible.value = !layerVisible.value;
};
// 构造官方卫星、路网图层
var satelliteLayer = new AMap.TileLayer.Satellite();
var roadNetLayer = new AMap.TileLayer.RoadNet();
/**
 * @切换卫星地图
 * */
const swicthSatellite = (val) => {
  if (val) {
    aMap.add(satelliteLayer);
  } else {
    aMap.remove(satelliteLayer);
  }
};
/**
 * @切换路网地图
 * */
const handleGrid = (val) => {
  if (val) {
    aMap.add(roadNetLayer);
  } else {
    aMap.remove(roadNetLayer);
  }
};

// -------------------------------------------------------------    轨迹播放    -------------------------------------------------

const isStart = ref(false);

function drawMarker(position) {
  let marker = new AMap.Marker({
    map: aMap,
    position,
    icon: "/public/img/cockpit/historyIcon.png",
    // imageSize: new AMap.Size(20, 20),
    offset: new AMap.Pixel(-13, -26),
  });
  marker.on("moving", function (e) {
    passedPolyline.setPath(e.passedPath);
    aMap.setCenter(e.target.getPosition(), true);
  });
  return marker;
}

function drawLine(path) {
  let polyline = new AMap.Polyline({
    map: aMap,
    path,
    showDir: true,
    strokeColor: "#28F", //线颜色
    strokeWeight: 4, //线宽
  });
  return polyline;
}

var passedPolyline = new AMap.Polyline({
  map: aMap,
  strokeColor: "#AF5", //线颜色
  strokeWeight: 4, //线宽
});

/**
 * @开始播放
 * */
const startMove = () => {
  isStart.value = true;
  AMap.plugin("AMap.MoveAnimation", () => {
    markerList.value.forEach((item, index) => {
      item.moveAlong(trackLineList.value[index], {
        // 每一段的时长
        duration: 500, //可根据实际采集时间间隔设置
        // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
        // autoRotation: true,
      });
    });
  });
};

/**
 * @暂停播放
 * */
const pauseAnimation = () => {
  markerList.value.forEach((item) => {
    item.pauseMove();
  });
  // marker1.pauseMove();
};

/**
 * @继续播放
 * */
const resumeAnimation = () => {
  markerList.value.forEach((item) => {
    item.resumeMove();
  });
  // marker1.resumeMove();
};

/**
 * @停止播放
 * */
const stopAnimation = () => {
  markerList.value.forEach((item) => {
    item.stopMove();
  });
  // marker1.stopMove();
};

const clear = () => {
  isStart.value = false;
  stopAnimation();
  aMap.clearMap();
  // 轨迹列表数据
  trackList.value = [];
  // 轨迹航线
  trackLineList.value = [];
  markerList.value = [];
  lineList.value = [];
};

onMounted(() => {
  initMap();
});
</script>

<style lang="scss">
#history {
  .el-table__header-wrapper {
    margin-bottom: 10px;

    .el-table__header {
      height: 73px;

      th {
        font-size: 12px;
        font-weight: 400;
        background: rgba(255, 255, 255, 1) !important;
      }
    }
  }

  .el-table__body-wrapper {
    .el-table__body .el-table__row {
      height: 60px;
      font-size: 12px;
      font-weight: 400;
    }
  }

  .el-tabs .el-tabs__header .el-tabs__item {
    font-family: PingFang;
    font-size: 12px !important;
    font-weight: 400 !important;
    // color: rgba(42, 130, 228, 1);
  }

  .el-tabs .el-tabs__content {
    color: rgba(56, 56, 56, 1);
    font-family: PingFang;
    font-size: 12px;
    height: 250px;
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer and Edge */
    .content-line {
      padding: 10px 0;
      border-bottom: 1px rgba(242, 242, 242, 0.2) dashed;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .contant {
        display: block;
        text-align: right;
        width: 147px;
        color: rgba(166, 166, 166, 1);
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏超出部分 */
        text-overflow: ellipsis; /* 显示省略号 */

        .el-checkbox {
          height: 14px;
        }
      }
    }
  }

  .el-tabs__content::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
  }
}

.history-picker-popper {
  // width: 422px;
  left: 330px !important;
}
</style>

<style scoped lang="scss">
#history {
  width: 100%;
  height: 100%;

  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: calc(100% - 40px);
    height: 92%;
    margin: 0 20px 20px;
    border-radius: 10px;
  }

  .left {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 67%;
    height: 100%;

    #historyMap {
      width: 100%;
      height: 65.7%;
      // height: calc(100% - 219px);
    }

    .airspaceLayer {
      position: absolute;
      width: 30px;
      height: 30px;
      background: url("@/assets/images/airspacePop.png");
      background-size: 100% 100%;
      right: 20px;
      bottom: 300px;
      z-index: 1000;
    }
    .layerControl {
      width: 210px;
      height: auto;
      position: absolute;
      z-index: 1000;
      bottom: 330px;
      right: 20px;
      background-color: #ffffff;
      border-radius: 6px;
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
      padding: 18px 21px 15px;

      .el-checkbox-group {
        max-height: 250px;
        margin-left: 20px;
        overflow: hidden;
        overflow-y: scroll; /* 显示垂直滚动条 */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* Internet Explorer and Edge */
        .checkTitleClass {
          width: 150px;
          white-space: nowrap; /* 防止文本换行 */
          overflow: hidden; /* 超出部分隐藏 */
          text-overflow: ellipsis; /* 使用省略号隐藏 */
        }
      }
      .el-checkbox-group::-webkit-scrollbar {
        display: none; /* Safari and Chrome */
      }
      .el-checkbox {
        height: 24px;
      }
    }

    .trackList {
      width: 100%;
      height: 34.3%;
      background: rgba(244, 244, 244, 1);
    }
  }
  .right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 32%;
    height: 100%;

    background: rgba(255, 255, 255, 1);

    .timeSearch {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 25px 30px;
      width: 100%;
      height: 65.7%;
      border-bottom: 1px solid rgba(220, 223, 230, 1);

      .header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
        height: 20%;

        .icon {
          width: 20px;
          height: 20px;
          margin-right: 10px;
        }

        .content {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;
          width: 91%;
          height: 100%;

          .title {
            font-size: 14px;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
          }

          .desc {
            font-size: 14px;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
          }
        }
      }

      .body {
        width: 100%;
        height: 75%;
        margin-top: 10px;
        padding: 20px 20px 20px 9%;
        overflow-y: scroll;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* Internet Explorer and Edge */
      }
    }
    .playContral {
      padding: 20px 45px 35px 25px;
      width: 100%;
      height: 34.3%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;

      .contralArgs {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        // height: 37%;

        .item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;
          width: 100%;

          .label {
            width: 34%;
            font-size: 14px;
            font-weight: 400;
            font-family: PingFang;
            color: rgba(51, 51, 51, 1);
            text-align: right;
          }

          .arg {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 64%;

            .divider {
              margin: 0 30px;
              width: 11px;
              height: 1.5px;
              background: #615f58;
            }
          }
        }
      }

      .contralBtns {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;

        .btn {
          width: 22%;
          height: 36px;
          border-radius: 4px;
          margin: 0 !important;
        }

        .suspend {
          background: rgba(250, 242, 217, 1);
          border: 1px solid rgba(237, 178, 0, 1);
        }

        .continue {
          background: rgba(217, 233, 250, 1);
          border: 1px solid rgba(42, 130, 228, 1);
        }

        .remove {
          background: rgba(250, 217, 217, 1);
          border: 1px solid rgba(212, 48, 48, 1);
        }
      }
    }
  }

  .detailTabs {
    position: absolute;
    z-index: 100;
    width: 390px;
    padding: 15px 20px 19px;
    top: 50px;
    left: 50px;
    border-radius: 7px;
    background: #fff;

    .goBack {
      width: 100px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      font-size: 14px;
      font-weight: 400;
      font-family: PingFang;
      color: rgba(0, 0, 0, 1);
      border-radius: 4px;
      background: rgba(217, 233, 250, 1);
      border: 1px solid rgba(42, 130, 228, 1);
    }
  }
}
</style>
